@picker-prefix: ~"@{css-prefix}-picker";

.pickerenter {
	animation-name: pickerenter;
  animation-duration: 400ms;
  animation-timing-function: ease-in;
}

.pickerleave {
	animation-name: pickerleave;
  animation-duration: 300ms;
  animation-timing-function: ease-in;
}

@keyframes pickerenter {
	0% {
		height: 0;
		transform: translateY(100%);
	}

	100% {
		height: 100%;
		transform: translateY(0);
	}
}

@keyframes pickerleave {
	0% {
		height: 100%;
		transform: translateY(0);
	}

	100% {
		height: 0;
		transform: translateY(100%);
	}
}

.@{picker-prefix} {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 700px;
	animation-fill-mode: forwards;
	background-color: @body-background;
	flex-direction: column;

	&-title {
		width: 100%;
    height: 126px;
    justify-content: space-between;
    align-items: center;
    .set-border(bottom);
	}

	&-cancel {
		padding: 0 30px;
		height: 126px;
  }

  &-confirm {
		padding: 0 30px;
		height: 126px;
  }

  &-ul {
    flex: 1;
    width: 100%;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
  }

  &-li {
    flex-direction: column;
    height: 100px;
    align-items: center;
    justify-content: center;
  }

}